<template>
  <div class="image.png">
    <div class="top-navbar">
      <i class="iconfont iconbtn_nav_back"></i>
    </div>
    <div class="min">
      <div class="body-navbar">
        <h2>您好, 请登录</h2>
      </div>
      <div class="main">
        <van-form>
          <van-cell-group inset icon="location-o">
            <van-row>
              <van-col span="24"
                ><van-cell class="end">
                  <i class="iconfont iconbianzu1"></i>
                  <van-field
                    v-model="username"
                    name="用户名"
                    placeholder="请输入手机号码"
                    :rules="[{ required: true, message: '请填写用户名' }]"
                  /> </van-cell
              ></van-col>
            </van-row>

            <van-cell>
              <i class="iconfont iconyanzhengma"></i>
              <van-row>
                <van-col span="14"
                  ><van-field
                    v-model="password"
                    name="验证吗"
                    placeholder="请输入验证码"
                    :rules="[{ required: true, message: '请输入验证码' }]"
                /></van-col>
                <van-col span="10">
                  <van-button
                    native-type="button"
                    ref="btn"
                    class="send"
                    @click="code"
                    :disabled="isDisabled"
                    >获取验证码</van-button
                  >
                </van-col>
              </van-row>
            </van-cell>

            <p class="text">
              登录既同意<span>《用户使用协议》</span>和<span>《隐私协议》</span>
            </p>
          </van-cell-group>
          <div style="margin: 16px">
            <van-button
              color="#ee0a24"
              class="confirm"
              round
              block
              type="primary"
              native-type="submit"
              @click="onSubmit"
            >
              确定
            </van-button>
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script>
import { loginCodeAPI, loginAPI } from '@/api/user'
import { setToken } from '@/utils/storage'
/* import { nextTick } from 'vue' */
export default {
  name: 'login-page',
  data() {
    return {
      username: '18888881111',
      password: '',
      code1: '',
      isDisabled: false
    }
  },
  methods: {
    async onSubmit(values) {
      // console.log('submit', values)
      try {
        const res = await loginAPI({
          mobile: this.username,
          code: this.code1
        })
        this.$store.commit('library/userInfo', res.data)
        console.log(res)

        // console.log(res.data)
        setToken(res.data.jwt)
        this.$toast('登录成功')
        this.$router.push('/')
      } catch {
        this.$router.push('/login')
      }
    },
    async code() {
      let num = 10
      let id = null
      this.isDisabled = true
      /*   if (id === 0) {
        clearInterval(id)
      } */
      id = setInterval(async function () {
        num--
        btn.innerHTML = num + 's后重试'
        if (num === 0) {
          console.log(num)
          clearInterval(id)
          btn.innerHTML = '获取验证码'
          this.isDisabled = false
        }
      }, 1000)

      console.log('this.diasble', this.isDisabled)
      await this.$nextTick()
      const btn = this.$refs.btn
      // btn.innerHTML = num + 's后重试'
      const res = await loginCodeAPI(this.username)
      console.log(res)
      console.log(res.data)
      this.$toast(res.data)
      this.code1 = res.data
      this.isDisabled = false
    }
  }
}
</script>

<style lang="less" scoped>
@proy: #f9f9f9;
.top-navbar {
  height: 35px;
  .iconfont {
    line-height: 35px;
    font-size: 40px;
  }
}
.body-navbar {
  padding: 50px 15px;
  /* background-color: @proy; */
  h2 {
    font-size: 18px;
  }
}
.van-cell__value {
  display: flex;
  align-items: center;
}
/* .main {
  background-color: @proy;
  height: 446.25px;
} */
.min {
  background-color: @proy;
  height: 74.7vh;
}
.code {
  font-size: 13px;
}
.text {
  font-size: 12px;
  span {
    color: #00c6e5;
  }
}
.bbbb {
  float: right;
}

.send {
  border: none;
  font-size: 14px;
  color: #00c6e5;
}
</style>
